﻿<div class="jq22-container" id="pc-news">
	<div id="wrapper">
		<div id="slider-wrap">
			<ul id="slider">
				<li data-color="#1abc9c" v-for="item,index in xwlbtList" :key="index">
					<div>
						<img :src="imgUrl+item.image">
					</div>                
				</li>
			</ul>
		</div>
		<div class="btns" id="next"><i class="fa fa-arrow-right"></i></div>
		<div class="btns" id="previous"><i class="fa fa-arrow-left"></i></div>
		<div id="counter"></div>
	</div>
</div>
</div>
<link rel="stylesheet" type="text/css" href="http://www.jq22.com/jquery/font-awesome.4.6.0.css">
					<link rel="stylesheet" href="css/news.css">
					<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
					<script type="text/javascript" src="js/slide.js"></script>
<script type="text/javascript">
	const App2 = {
		data() {
			return {
				imgUrl: 'http://dbs.wutp.com.cn/CM-API',
				xwlbtList: [],
			};
		},
		mounted() {
			this.getXwlbt();
		},
		methods: {
			openUrl(remark) {
				debugger
				if (remark) {
					// window.location.href = remark
					window.open(remark)
				}
			},
			// 获取新闻动态轮播图
			async getXwlbt() {
			    let that = this;
			    await axios({
			        method: "get",
			        url: "http://dbs.wutp.com.cn/CM-API/homePageApi/getBanner?type=XWLBT",
			    }).then(function (res) {
			        setTimeout(() => {
			            new Swiper('.swiper-containers', {  //绑定如期换成id!!!
			                pagination: '.swiper-pagination',
			                paginationClickable: true,
			                nextButton: '.swiper-button-next',
			                prevButton: '.swiper-button-prev',
			                spaceBetween: 30,
			                autoplay: 5000,
			                grabCursor: true,
			                autoplayDisableOnInteraction: true,
							speed:1000,
			            });
			        }, 10)
			        console.log('动态轮播图', res)
					
			        that.xwlbtList = res.data.data;
			    })
			}
		}
	};
	Vue.createApp(App2).mount('#pc-news');
</script>